---
title: Props Passing | gluestack-style
description: gluestack-style allows you to pass properties to your styled component directly from the style configuration, also known as the component theme.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="styled/api/Props Passing" />

# Props Passing

Prop passing allows you to pass properties to your styled component directly from the style configuration, also known as the component theme. This is very similar to `defaultProps` but with some added flair.

Unlike defaultProps that apply by default, when you pass props through the 'props' key, these props get passed to the component at render time based on the condition specified. This is particularly handy when you want to conditionally pass props to a component.For instance, you could use prop passing to modify a component's properties based on the screen size.

## Example

```jsx
const StyledComponent = styled(
  TextInput,
  {
    p:"$3",
    bg: "$coolGray50",
    props:{
      placeholderTextColor:"$coolGray500"
    }
    ":focus": {
      bg: "$coolGray100",
      props:{
        placeholderTextColor:"$coolGray700"
      }
    },
  },
);
```

> Caution: Utilizing the `Passing Props` feature within `Media Queries` is not supported.
